<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { NGradientText } from 'naive-ui'

const props = defineProps<{
  countDown: number
}>()

const isExpanded = ref(true)
const showCelebrationText = ref(false)
const canvasRef = ref<HTMLCanvasElement | null>(null)
let fireworksAnimationId: number | null = null
let fireworksStarted = false
let lastTime = 0

// 烟花参数
interface Particle {
  x: number
  y: number
  vx: number
  vy: number
  alpha: number
  color: string
  size: number
  life: number
  maxLife: number
  trail?: {x: number, y: number}[]
  decay?: number
  gravity?: number
  friction?: number
  brightness?: number
  hue?: number
  type?: string
}

interface Firework {
  x: number
  y: number
  targetY: number
  speed: number
  particles: Particle[]
  exploded: boolean
  color: string
  size: number
  wiggle: number
  hue: number
  brightness: number
}

let fireworks: Firework[] = []
let particles: Particle[] = []
let lastFireworkTime = 0
const mainFireworkDelay = 100 // 主烟花延迟时间
const explosionDuration = 200 // 爆炸持续时间，增加为更慢的效果
const clockDisplayDuration = 100 // 时钟显示时间，7秒
const fireworkRiseSpeed = 55.5 // 烟花上升速度控制，值越大上升越快

function formatCountdown(ms: number) {
  const seconds = Math.floor((ms / 1000) % 60)
  const minutes = Math.floor((ms / 1000 / 60) % 60)
  const hours = Math.floor((ms / (1000 * 60 * 60)) % 24)
  const days = Math.floor(ms / (1000 * 60 * 60 * 24))
  return {
    days,
    hours,
    minutes,
    seconds
  }
}

function initCanvas() {
  const canvas = canvasRef.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  if (!ctx) return
  
  // 设置Canvas尺寸为窗口大小
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  
  // 创建主烟花
  createMainFirework()
  
  // 开始动画循环
  lastTime = performance.now()
  animate()
}

function createMainFirework() {
  // 主烟花从底部中心发射
  const hue = 45 // 金色色调
  fireworks.push({
    x: window.innerWidth / 2,
    y: window.innerHeight,
    targetY: window.innerHeight * 0.35, // 上升到65%的高度
    speed: fireworkRiseSpeed, // 使用速度变量
    particles: [],
    exploded: false,
    color: `hsl(${hue}, 100%, 50%)`, // 使用HSL颜色
    size: 5, // 更大的烟花点
    wiggle: 0.5, // 上升时的摆动程度
    hue: hue,
    brightness: 90
  })
}

function createSecondaryFireworks() {
  const positions = [0.3, 0.5, 0.7] // 次要烟花的水平位置
  const hues = [15, 200, 280] // 不同色调：橙色、蓝色、紫色
  
  positions.forEach((pos, idx) => {
    setTimeout(() => {
      const hue = hues[idx % hues.length]
      const firework = {
        x: window.innerWidth * pos,
        y: window.innerHeight,
        targetY: window.innerHeight * (0.4 + Math.random() * 0.2),
        speed: fireworkRiseSpeed * (0.8 + Math.random() * 0.4), // 使用速度变量并增加随机性
        particles: [],
        exploded: false,
        color: `hsl(${hue}, 100%, 50%)`,
        size: 4,
        wiggle: 1 + Math.random(),
        hue: hue,
        brightness: 80 + Math.random() * 20
      }
      
      fireworks.push(firework)
    }, 600 * (idx + 1)) // 依次发射
  })
}

function explode(firework: Firework) {
  // 爆炸效果 - 创建大量粒子
  const particleCount = firework === fireworks[0] ? 300 : 220 // 主烟花更多粒子
  const isMainFirework = firework === fireworks[0]
  const hue = firework.hue
  const brightness = firework.brightness
  
  // 爆炸中心的闪光效果 - 先显示
  const centerFlash: Particle = {
    x: firework.x,
    y: firework.y,
    vx: 0,
    vy: 0,
    alpha: 1,
    color: '#FFFFFF',
    size: isMainFirework ? 35 : 25, // 更大的闪光
    life: 0,
    maxLife: isMainFirework ? 20 : 15,
    brightness: 100,
    type: 'flash'
  }
  particles.push(centerFlash)
  
  // 爆炸波纹效果
  for (let i = 0; i < 3; i++) {
    setTimeout(() => {
      particles.push({
        x: firework.x,
        y: firework.y,
        vx: 0,
        vy: 0,
        alpha: 0.7 - i * 0.2,
        color: `hsl(${hue}, 100%, ${brightness}%)`,
        size: isMainFirework ? 15 + i * 25 : 10 + i * 20,
        life: 0,
        maxLife: isMainFirework ? 30 + i * 5 : 25 + i * 5,
        type: 'ring'
      })
    }, i * 120)
  }
  
  // 创建爆炸粒子
  const createExplosionParticles = (delay: number, count: number, speedMultiplier: number, sizeMultiplier: number, hueVariation: number) => {
    setTimeout(() => {
      // 创建完整圆形的烟花爆炸效果
      for (let i = 0; i < count; i++) {
        // 计算角度，确保覆盖完整的圆形 (0 到 2π)
        const angle = (i / count) * Math.PI * 2
        const particleHue = hue + (Math.random() * hueVariation * 2 - hueVariation)
        const particleBrightness = brightness - 10 + Math.random() * 20
        const particlePower = (3 + Math.random() * 2) * speedMultiplier
        const particleSize = (Math.random() * 3 + 1.5) * sizeMultiplier
        
        // 主要粒子 - 带拖尾效果
        const particle: Particle = {
          x: firework.x,
          y: firework.y,
          vx: Math.cos(angle) * particlePower,
          vy: Math.sin(angle) * particlePower,
          alpha: 1,
          color: `hsl(${particleHue}, 100%, ${particleBrightness}%)`,
          size: particleSize,
          life: 0,
          maxLife: Math.random() * 80 + 80,
          trail: [],
          decay: 0.01 - Math.random() * 0.005, // 粒子衰减速率
          gravity: 0.03 + Math.random() * 0.01, // 重力
          friction: 0.995 - Math.random() * 0.002, // 阻力
          hue: particleHue,
          brightness: particleBrightness,
          type: 'trail'
        }
        particles.push(particle)
        
        // 添加一些小型粒子，跟随主粒子但有轻微偏移
        if (i % 3 === 0) {
          const smallParticle: Particle = {
            x: firework.x,
            y: firework.y,
            vx: Math.cos(angle + Math.random() * 0.3) * particlePower * 0.8,
            vy: Math.sin(angle + Math.random() * 0.3) * particlePower * 0.8,
            alpha: 1,
            color: `hsl(${particleHue + 20}, 100%, ${particleBrightness + 10}%)`,
            size: particleSize * 0.6,
            life: 0,
            maxLife: Math.random() * 60 + 60,
            decay: 0.015, // 更快衰减
            gravity: 0.02,
            friction: 0.99,
            type: 'small'
          }
          particles.push(smallParticle)
        }
        
        // 闪光粒子 - 更亮，更快
        if (i % 6 === 0) {
          const sparkParticle: Particle = {
            x: firework.x,
            y: firework.y,
            vx: Math.cos(angle) * particlePower * 1.5,
            vy: Math.sin(angle) * particlePower * 1.5,
            alpha: 1,
            color: '#FFFFFF',
            size: Math.random() * 2 + 0.5,
            life: 0,
            maxLife: Math.random() * 40 + 20,
            decay: 0.02,
            gravity: 0.01,
            friction: 0.99,
            type: 'spark'
          }
          particles.push(sparkParticle)
        }
      }
      
      // 添加烟雾效果粒子 - 增加厚重感
      for (let i = 0; i < count / 6; i++) {
        const angle = Math.random() * Math.PI * 2
        const distance = Math.random() * 10
        const smokeParticle: Particle = {
          x: firework.x + Math.cos(angle) * distance,
          y: firework.y + Math.sin(angle) * distance,
          vx: (Math.random() - 0.5) * 0.8,
          vy: (Math.random() - 0.5) * 0.8,
          alpha: 0.6 + Math.random() * 0.2,
          color: `hsl(${hue}, 10%, 50%)`,
          size: Math.random() * 15 + 10,
          life: 0,
          maxLife: Math.random() * 120 + 100,
          decay: 0.008,
          gravity: 0.001,
          friction: 0.995,
          type: 'smoke'
        }
        particles.push(smokeParticle)
      }
      
      // 添加一些完全随机的粒子
      for (let i = 0; i < count / 5; i++) {
        const angle = Math.random() * Math.PI * 2
        const particlePower = (2 + Math.random() * 3) * speedMultiplier
        const randomHue = hue + (Math.random() * 60 - 30)
        
        const randomParticle: Particle = {
          x: firework.x,
          y: firework.y,
          vx: Math.cos(angle) * particlePower,
          vy: Math.sin(angle) * particlePower,
          alpha: 0.8 + Math.random() * 0.2,
          color: `hsl(${randomHue}, 100%, ${brightness}%)`,
          size: Math.random() * 3 + 1,
          life: 0,
          maxLife: Math.random() * 70 + 50,
          decay: 0.012 + Math.random() * 0.005,
          gravity: 0.02 + Math.random() * 0.01,
          friction: 0.99 - Math.random() * 0.01,
          type: 'random'
        }
        particles.push(randomParticle)
      }
    }, delay)
  }
  
  // 分批创建粒子，形成爆炸的层次感
  createExplosionParticles(0, particleCount / 3, 0.7, 1.2, 10)
  createExplosionParticles(180, particleCount / 3, 1, 1, 20)
  createExplosionParticles(360, particleCount / 3, 1.3, 0.8, 30)
  
  // 如果是主烟花爆炸，等待爆炸效果充分展开后再显示文字
  if (isMainFirework) {
    setTimeout(() => {
      showCelebrationText.value = true
    }, explosionDuration * 0.6) // 在爆炸进行到60%时显示文字
    
    setTimeout(() => {
      createSecondaryFireworks()
    }, explosionDuration) // 在爆炸完全结束后发射次要烟花
  }
}

function animate(currentTime = 0) {
  const deltaTime = currentTime - lastTime
  lastTime = currentTime
  
  const canvas = canvasRef.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  if (!ctx) return
  
  // 清除画布 - 使用半透明黑色，保留轨迹残影
  ctx.fillStyle = 'rgba(0, 0, 0, 0.07)'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  
  // 更新和绘制烟花
  for (let i = fireworks.length - 1; i >= 0; i--) {
    const firework = fireworks[i]
    
    if (!firework.exploded) {
      // 烟花上升 - 添加轻微的左右摆动
      firework.x += Math.sin(firework.y / 30) * firework.wiggle
      firework.y -= firework.speed
      
      // 绘制烟花主体
      ctx.beginPath()
      ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2)
      ctx.fillStyle = firework.color
      ctx.fill()
      
      // 绘制发光效果
      ctx.beginPath()
      ctx.arc(firework.x, firework.y, firework.size * 2.5, 0, Math.PI * 2)
      const gradient = ctx.createRadialGradient(
        firework.x, firework.y, firework.size * 0.5,
        firework.x, firework.y, firework.size * 2.5
      )
      gradient.addColorStop(0, firework.color)
      gradient.addColorStop(1, 'transparent')
      ctx.fillStyle = gradient
      ctx.fill()
      
      // 绘制尾迹 - 使用渐变和多段线条
      const trailLength = 40
      const trailWidth = 3
      
      // 主尾迹
      ctx.beginPath()
      ctx.moveTo(firework.x, firework.y)
      ctx.lineTo(firework.x, firework.y + trailLength)
      const trailGradient = ctx.createLinearGradient(firework.x, firework.y, firework.x, firework.y + trailLength)
      trailGradient.addColorStop(0, firework.color)
      trailGradient.addColorStop(1, 'transparent')
      ctx.strokeStyle = trailGradient
      ctx.lineWidth = trailWidth
      ctx.stroke()
      
      // 侧面尾迹 - 左侧
      ctx.beginPath()
      ctx.moveTo(firework.x, firework.y)
      ctx.lineTo(firework.x - 1, firework.y + trailLength * 0.8)
      const leftTrailGradient = ctx.createLinearGradient(firework.x, firework.y, firework.x - 1, firework.y + trailLength * 0.8)
      leftTrailGradient.addColorStop(0, firework.color)
      leftTrailGradient.addColorStop(1, 'transparent')
      ctx.strokeStyle = leftTrailGradient
      ctx.lineWidth = trailWidth * 0.6
      ctx.stroke()
      
      // 侧面尾迹 - 右侧
      ctx.beginPath()
      ctx.moveTo(firework.x, firework.y)
      ctx.lineTo(firework.x + 1, firework.y + trailLength * 0.8)
      const rightTrailGradient = ctx.createLinearGradient(firework.x, firework.y, firework.x + 1, firework.y + trailLength * 0.8)
      rightTrailGradient.addColorStop(0, firework.color)
      rightTrailGradient.addColorStop(1, 'transparent')
      ctx.strokeStyle = rightTrailGradient
      ctx.lineWidth = trailWidth * 0.6
      ctx.stroke()
      
      // 更新和绘制上升轨迹的火花
      for (let j = firework.particles.length - 1; j >= 0; j--) {
        const particle = firework.particles[j]
        particle.x += particle.vx
        particle.y = firework.y + 20 - particle.vy
        particle.life++
        
        if (particle.life > particle.maxLife) {
          firework.particles.splice(j, 1)
          continue
        }
        
        particle.alpha = 1 - (particle.life / particle.maxLife)
        
        // 绘制火花粒子
        ctx.beginPath()
        ctx.arc(particle.x, particle.y, particle.size * particle.alpha, 0, Math.PI * 2)
        ctx.fillStyle = `rgba(255, 165, 0, ${particle.alpha})`
        ctx.fill()
        
        // 添加发光效果
        if (Math.random() < 0.3) {
          ctx.beginPath()
          ctx.arc(particle.x, particle.y, particle.size * 2 * particle.alpha, 0, Math.PI * 2)
          const sparkGradient = ctx.createRadialGradient(
            particle.x, particle.y, 0,
            particle.x, particle.y, particle.size * 2 * particle.alpha
          )
          sparkGradient.addColorStop(0, `rgba(255, 255, 200, ${particle.alpha * 0.8})`)
          sparkGradient.addColorStop(1, 'transparent')
          ctx.fillStyle = sparkGradient
          ctx.fill()
        }
      }
      
      // 检查是否到达目标高度
      if (firework.y <= firework.targetY) {
        explode(firework)
        firework.exploded = true
      }
    }
  }
  
  // 更新和绘制爆炸粒子
  for (let i = particles.length - 1; i >= 0; i--) {
    const particle = particles[i]
    
    // 应用物理效果
    if (particle.type !== 'flash' && particle.type !== 'ring') {
      // 应用重力
      particle.vy += particle.gravity || 0.03
      
      // 应用阻力
      particle.vx *= particle.friction || 0.995
      particle.vy *= particle.friction || 0.995
      
      // 更新位置
      particle.x += particle.vx
      particle.y += particle.vy
      
      // 保存拖尾点
      if (particle.trail && particle.type === 'trail') {
        particle.trail.push({x: particle.x, y: particle.y})
        
        // 限制拖尾长度
        if (particle.trail.length > 10) {
          particle.trail.shift()
        }
      }
    }
    
    // 更新生命周期
    particle.life++
    
    // 移除寿命结束的粒子
    if (particle.life > particle.maxLife) {
      particles.splice(i, 1)
      continue
    }
    
    // 计算透明度 - 使用自定义衰减
    let alpha
    if (particle.type === 'smoke') {
      // 烟雾粒子慢慢变淡
      alpha = particle.alpha * (1 - particle.life / particle.maxLife)
    } else if (particle.type === 'flash' || particle.type === 'ring') {
      // 闪光和环形粒子快速淡出
      alpha = particle.alpha * (1 - Math.pow(particle.life / particle.maxLife, 2))
    } else {
      // 其他粒子使用自定义衰减
      const fadeStart = 0.7 // 在70%的生命周期后开始淡出
      alpha = particle.life < particle.maxLife * fadeStart ? 
              particle.alpha : 
              particle.alpha * (1 - ((particle.life - particle.maxLife * fadeStart) / (particle.maxLife * (1 - fadeStart))))
      
      // 应用衰减
      if (particle.decay) {
        alpha *= Math.pow(0.99, particle.life)
      }
    }
    
    // 根据粒子类型绘制不同效果
    if (particle.type === 'flash') {
      // 爆炸中心闪光
      ctx.beginPath()
      ctx.arc(particle.x, particle.y, particle.size * (1 - particle.life / particle.maxLife), 0, Math.PI * 2)
      const flashGradient = ctx.createRadialGradient(
        particle.x, particle.y, 0,
        particle.x, particle.y, particle.size * (1 - particle.life / particle.maxLife)
      )
      flashGradient.addColorStop(0, `rgba(255, 255, 255, ${alpha})`)
      flashGradient.addColorStop(0.5, `rgba(255, 255, 200, ${alpha * 0.5})`)
      flashGradient.addColorStop(1, 'transparent')
      ctx.fillStyle = flashGradient
      ctx.fill()
    } else if (particle.type === 'ring') {
      // 爆炸环形波
      ctx.beginPath()
      ctx.arc(particle.x, particle.y, particle.size * (particle.life / particle.maxLife), 0, Math.PI * 2)
      ctx.lineWidth = 2
      ctx.strokeStyle = particle.color.replace(')', `, ${alpha})`)
                                     .replace('rgb', 'rgba')
      ctx.stroke()
    } else if (particle.type === 'smoke') {
      // 烟雾粒子
      ctx.beginPath()
      ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
      ctx.fillStyle = particle.color.replace(')', `, ${alpha * 0.7})`)
                                   .replace('rgb', 'rgba')
                                   .replace('hsl', 'hsla')
      ctx.fill()
    } else if (particle.type === 'trail' && particle.trail) {
      // 带拖尾的粒子
      // 绘制粒子本身
      ctx.beginPath()
      ctx.arc(particle.x, particle.y, particle.size * Math.min(1, alpha * 1.5), 0, Math.PI * 2)
      ctx.fillStyle = particle.color.replace(')', `, ${alpha})`)
                                   .replace('rgb', 'rgba')
                                   .replace('hsl', 'hsla')
      ctx.fill()
      
      // 绘制拖尾
      if (particle.trail.length > 1) {
        ctx.beginPath()
        ctx.moveTo(particle.trail[0].x, particle.trail[0].y)
        
        for (let j = 1; j < particle.trail.length; j++) {
          ctx.lineTo(particle.trail[j].x, particle.trail[j].y)
        }
        
        ctx.strokeStyle = particle.color.replace(')', `, ${alpha * 0.4})`)
                                       .replace('rgb', 'rgba')
                                       .replace('hsl', 'hsla')
        ctx.lineWidth = particle.size * 0.8
        ctx.stroke()
      }
      
      // 添加发光效果
      ctx.beginPath()
      ctx.arc(particle.x, particle.y, particle.size * 2, 0, Math.PI * 2)
      const glowGradient = ctx.createRadialGradient(
        particle.x, particle.y, particle.size * 0.5,
        particle.x, particle.y, particle.size * 2
      )
      glowGradient.addColorStop(0, particle.color.replace(')', `, ${alpha * 0.4})`)
                                              .replace('rgb', 'rgba')
                                              .replace('hsl', 'hsla'))
      glowGradient.addColorStop(1, 'transparent')
      ctx.fillStyle = glowGradient
      ctx.fill()
    } else {
      // 普通粒子
      ctx.beginPath()
      ctx.arc(particle.x, particle.y, particle.size * Math.min(1, alpha * 1.2), 0, Math.PI * 2)
      
      // 处理颜色和透明度
      let color = particle.color
      if (color.startsWith('#')) {
        const r = parseInt(color.slice(1, 3), 16)
        const g = parseInt(color.slice(3, 5), 16)
        const b = parseInt(color.slice(5, 7), 16)
        color = `rgba(${r}, ${g}, ${b}, ${alpha})`
      } else if (color.startsWith('rgb')) {
        color = color.replace('rgb', 'rgba').replace(')', `, ${alpha})`)
      } else if (color.startsWith('hsl')) {
        color = color.replace('hsl', 'hsla').replace(')', `, ${alpha})`)
      }
      
      ctx.fillStyle = color
      ctx.fill()
      
      // 闪光粒子额外效果
      if (particle.type === 'spark') {
        ctx.beginPath()
        ctx.arc(particle.x, particle.y, particle.size * 3, 0, Math.PI * 2)
        const sparkGradient = ctx.createRadialGradient(
          particle.x, particle.y, 0,
          particle.x, particle.y, particle.size * 3
        )
        sparkGradient.addColorStop(0, `rgba(255, 255, 255, ${alpha * 0.7})`)
        sparkGradient.addColorStop(1, 'transparent')
        ctx.fillStyle = sparkGradient
        ctx.fill()
      }
    }
  }
  
  // 检查是否所有烟花都爆炸完毕，且粒子都消失
  if (fireworks.every(fw => fw.exploded) && particles.length === 0 && isExpanded.value) {
    // 延迟收缩，让时钟显示更长时间（7秒）
    setTimeout(() => {
      isExpanded.value = false
    }, clockDisplayDuration) // 使用7秒的时钟显示时间
  }
  
  // 继续动画循环
  fireworksAnimationId = requestAnimationFrame(animate)
}

onMounted(() => {
  // 初始化Canvas
  setTimeout(() => {
    initCanvas()
    fireworksStarted = true
  }, 500) // 给页面一点时间加载
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  // 清理动画和事件监听
  if (fireworksAnimationId !== null) {
    cancelAnimationFrame(fireworksAnimationId)
  }
  window.removeEventListener('resize', handleResize)
})

function handleResize() {
  const canvas = canvasRef.value
  if (!canvas) return
  
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
}
</script>

<template>
  <div :class="['celebration-container', { 'collapsed': !isExpanded }]">
    <canvas ref="canvasRef" class="fireworks-canvas"></canvas>
    
    <div class="clock-container" :class="{ 'show-content': showCelebrationText }">
      <div class="analog-clock">
        <div class="clock-face">
          <!-- 分钟刻度 -->
          <div v-for="n in 60" :key="`minute-${n}`" class="minute-mark" 
               :style="{ transform: `rotate(${n * 6}deg)` }">
            <div :class="{ 'minute-line': true, 'hour-line': n % 5 === 0 }"></div>
          </div>
          
          <!-- 小时刻度 -->
          <div v-for="n in 12" :key="`hour-${n}`" class="hour-mark" 
               :style="{ transform: `rotate(${n * 30}deg) translateY(-45%)` }">
            <span :style="{ transform: `rotate(${-n * 30}deg)` }">{{ n }}</span>
          </div>
          
          <!-- 天数指示器 -->
          <div class="days-indicator">
            <span>{{ formatCountdown(countDown).days }}</span>
            <span class="days-label">天</span>
          </div>
          
          <!-- 庆祝文字 - 移到时钟上方 -->
          <div class="celebration-text" v-if="isExpanded">
            <NGradientText :gradient="{ from: '#FFD700', to: '#FFA500' }" size="32">
              热烈祝贺
            </NGradientText>
            <NGradientText :gradient="{ from: '#7b82ff', to: '#b4b8ff' }" size="32">
              仓颉
            </NGradientText>
            <NGradientText :gradient="{ from: '#FFD700', to: '#FFA500' }" size="32">
              即将于7月30日开源
            </NGradientText>
          </div>
          
          <!-- 时针、分针、秒针 -->
          <div class="clock-hands">
            <!-- 时针 -->
            <div class="hand hour-hand" 
                 :style="{ transform: `rotate(${(formatCountdown(countDown).hours % 12) * 30 + formatCountdown(countDown).minutes / 2}deg)` }">
            </div>
            
            <!-- 分针 -->
            <div class="hand minute-hand" 
                 :style="{ transform: `rotate(${formatCountdown(countDown).minutes * 6}deg)` }">
            </div>
            
            <!-- 秒针 -->
            <div class="hand second-hand" 
                 :style="{ transform: `rotate(${formatCountdown(countDown).seconds * 6}deg)` }">
            </div>
            
            <!-- 中心点 -->
            <div class="center-point"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.celebration-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  transition: all 0.5s ease-in-out;
}

.celebration-container.collapsed {
  width: 300px;
  height: 300px;
  top: auto;
  left: auto;
  bottom: 20px;
  right: 20px;
  background: transparent;
  border-radius: 50%;
  box-shadow: none;
  overflow: hidden;
}

.fireworks-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.clock-container {
  text-align: center;
  transition: all 0.8s ease-in-out;
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.clock-container.show-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 圆形时钟样式 */
.analog-clock {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  transition: all 0.5s ease-in-out;
}

.collapsed .analog-clock {
  transform: scale(0.75);
  margin: 0;
}

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(20, 20, 30, 0.9);
  border-radius: 50%;
  box-shadow: 
    0 0 0 10px rgba(123, 130, 255, 0.2),
    0 0 30px rgba(123, 130, 255, 0.5),
    inset 0 0 40px rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.collapsed .clock-face {
  box-shadow: 
    0 0 20px rgba(123, 130, 255, 0.6),
    inset 0 0 15px rgba(0, 0, 0, 0.7);
}

.clock-face::before {
  content: '';
  position: absolute;
  width: 95%;
  height: 95%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(30, 30, 40, 0.9) 0%, rgba(15, 15, 20, 0.95) 100%);
  z-index: 1;
}

/* 分钟刻度 */
.minute-mark {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

.minute-line {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 2px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  transform: translateX(-50%);
}

.hour-line {
  height: 15px;
  width: 3px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 5px rgba(123, 130, 255, 0.5);
}

/* 小时刻度 */
.hour-mark {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
}

.hour-mark span {
  display: block;
  width: 40px;
  height: 40px;
  font-size: 22px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 8px rgba(123, 130, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.celebration-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -160%);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  z-index: 6;
  width: 100%;
  text-align: center;
}

.clock-hands {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
  background: linear-gradient(to top, currentColor, transparent);
  border-radius: 5px;
  z-index: 5;
}

.hour-hand {
  width: 10px;
  height: 25%;
  margin-left: -5px;
  color: #FFD700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}

.minute-hand {
  width: 8px;
  height: 35%;
  margin-left: -4px;
  color: #7b82ff;
  box-shadow: 0 0 8px rgba(123, 130, 255, 0.8);
}

.second-hand {
  width: 3px;
  height: 40%;
  margin-left: -1.5px;
  color: #FF4500;
  box-shadow: 0 0 8px rgba(255, 69, 0, 0.8);
}

.center-point {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #FFFFFF, #7b82ff);
  box-shadow: 0 0 15px rgba(123, 130, 255, 0.8);
  z-index: 6;
}

.days-indicator {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 30, 0.7);
  border-radius: 15px;
  padding: 8px 15px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.days-indicator span {
  color: #FFD700;
  font-weight: bold;
  font-size: 36px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.days-indicator .days-label {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

.collapsed .days-indicator {
  top: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  box-shadow: none;
}

.collapsed .celebration-text {
  display: none;
}

@media (max-width: 768px) {
  .analog-clock {
    width: 320px;
    height: 320px;
  }
  
  .hour-mark span {
    font-size: 18px;
  }
  
  .celebration-text {
    transform: translate(-50%, -140%);
  }
  
  .days-indicator span {
    font-size: 30px;
  }
  
  .minute-line {
    height: 6px;
  }
  
  .hour-line {
    height: 12px;
  }
}
</style> 